<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无所遁形</title>
  <style>
      /*找到html标签、body标签，和挂载的标签 都给他们统一设置样式*/
      html, body, #app, .el-container {
          /*设置内部填充为0，几个布局元素之间没有间距*/
          padding: 0px;
          /*外部间距也是如此设置*/
          margin: 0px;
          /*统一设置高度为100%*/
          height: 100%;
      }

      /*添加按钮靠右显示*/
      .rightAlign {
          text-align: right;
      }

      table {
          border-right: 1px solid #000000;
          border-bottom: 1px solid #000000;
          text-align: center;
          width: 100%;
      }

      table th {
          border-left: 1px solid #000000;
          border-top: 1px solid #000000;
      }

      table td {
          border-left: 1px solid #000000;
          border-top: 1px solid #000000;
      }

      .el-radio-group {
          margin-right: 20px;
      }

      .el-radio {
          margin-right: 20px;
      }

  </style>
  <script src="/js/vue.js"></script>
  <script src="/js/vue-router.js"></script>
  <link rel="stylesheet" href="/css/el/index.css">
  <script src="/js/el/index.js"></script>
  <script type="text/javascript" src="/js/axios/index.js"></script>
  <script type="text/javascript" src="/api/ajax.js"></script>
  <script src="/js/marked/marked.js"></script>

</head>
<body>
<div id="app" style="margin-top: 30px">
  <el-form :model="queryForm" label-width="130px" size="mini">
    <el-form-item label="文件夹">
      <el-input v-model="queryForm.directories" placeholder="多个文件夹之间用;隔开"></el-input>
    </el-form-item>
    <el-form-item label="文件类型">
      <el-select v-model="queryForm.fileType" placeholder="请选择文件类型,可多选,可自定义" clearable filterable allow-create
                 style="width: 100%">
        <el-option v-for="item in fileTypes" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="文件名">
      <el-input placeholder="请输入文件名或文件名关键词,多个关键词用;分隔" v-model="queryForm.fileNameMatchCondition.keyWords">
        <el-checkbox v-model="queryForm.fileNameMatchCondition.ignoreCase" slot="append">忽略大小写</el-checkbox>
        <el-radio-group v-model="queryForm.fileNameMatchCondition.model" slot="append">
          <el-radio :label="1">精准</el-radio>
          <el-radio :label="2">开头</el-radio>
          <el-radio :label="3">包含</el-radio>
          <el-radio :label="4">结尾</el-radio>
        </el-radio-group>
        <el-checkbox v-model="queryForm.fileNameMatchCondition.regex" slot="append">正则表达式</el-checkbox>
        <el-radio v-model="queryForm.fileNameMatchCondition.relationship" label="1" slot="append">同时满足</el-radio>
        <el-radio v-model="queryForm.fileNameMatchCondition.relationship" label="2" slot="append">满足其一</el-radio>
      </el-input>
    </el-form-item>
    <el-form-item label="最后修改日期">
      <el-date-picker
          v-model="queryForm.lastModifiedRange" type="daterange" unlink-panels range-separator="至"
          align="right" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
          format="yyyy-MM-dd" value-format="yyyy-MM-dd" editable clearable>
      </el-date-picker>
    </el-form-item>
    <el-form-item label="在内容中搜索">
      <el-input placeholder="多个关键词用;分隔" v-model="queryForm.contentMatchCondition.keyWords">
        <el-checkbox v-model="queryForm.contentMatchCondition.ignoreCase" slot="append">忽略大小写</el-checkbox>
        <el-radio-group v-model="queryForm.contentMatchCondition.model" slot="append">
          <el-radio :label="1">精准</el-radio>
          <el-radio :label="2">开头</el-radio>
          <el-radio :label="3">包含</el-radio>
          <el-radio :label="4">结尾</el-radio>
        </el-radio-group>
        <el-checkbox v-model="queryForm.contentMatchCondition.regex" slot="append">正则表达式</el-checkbox>
        <el-radio v-model="queryForm.contentMatchCondition.relationship" label="1" slot="append">同时满足</el-radio>
        <el-radio v-model="queryForm.contentMatchCondition.relationship" label="2" slot="append">满足其一</el-radio>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="query" type="primary" :loading="loading">查询</el-button>
    </el-form-item>
  </el-form>
  <div style="margin: 30px">
    <div v-if="msg != null && msg != ''">{{msg}}</div>
    <div v-if="fileList != null && fileList.length >0">
      <p v-for="file in fileList">{{file}}</p>
    </div>
  </div>
</div>

</body>
</html>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        fileList: [],
        msg: '',
        loading:false,
        queryForm: {
          directories: "",
          fileType: '',
          fileNameMatchCondition: {
            keyWords: '',
            model: 3,
            equals: false,
            startsWith: false,
            contains: true,
            endsWith: false,
            ignoreCase: true,
            regex: false,
            relationship: "1",
          },
          contentMatchCondition: {
            keyWords: '',
            model: 3,
            equals: false,
            startsWith: false,
            contains: true,
            endsWith: false,
            ignoreCase: true,
            regex: false,
            relationship: "1",
          },
          lastModifiedRange: [],
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        fileTypes: [
          {value: 'txt', label: 'txt'},
          {value: 'doc', label: 'doc'},
          {value: 'docx', label: 'docx'},
          {value: 'xls', label: 'xls'},
          {value: 'xlsx', label: 'xlsx'},
          {value: 'pdf', label: 'pdf'},
          {value: 'java', label: 'java'},
          {value: 'properties', label: 'properties'},
          {value: 'json', label: 'json'},
          {value: 'log', label: 'log'},
          {value: 'xml', label: 'xml'},
          {value: 'vue', label: 'vue'},
          {value: 'html', label: 'html'},
          {value: 'js', label: 'js'},
          {value: 'css', label: 'css'},
          {value: 'jpg', label: 'jpg'},
          {value: 'png', label: 'png'},
          {value: 'mp4', label: 'mp4'},
          {value: 'avi', label: 'avi'},
          {value: 'mp3', label: 'mp3'},
          {value: 'rar', label: 'rar'},
          {value: 'zip', label: 'zip'},
          {value: 'exe', label: 'exe'}
        ]
      }
    },

    methods: {
      query() {
        this.loading = true;
        let model4F = this.queryForm.fileNameMatchCondition.model;
        this.queryForm.fileNameMatchCondition.equals = model4F === 1;
        this.queryForm.fileNameMatchCondition.startsWith = model4F === 2;
        this.queryForm.fileNameMatchCondition.contains = model4F === 3;
        this.queryForm.fileNameMatchCondition.endsWith = model4F === 4;
        let model4C = this.queryForm.contentMatchCondition.model;
        this.queryForm.contentMatchCondition.equals = model4C === 1;
        this.queryForm.contentMatchCondition.startsWith = model4C === 2;
        this.queryForm.contentMatchCondition.contains = model4C === 3;
        this.queryForm.contentMatchCondition.endsWith = model4C === 4;
        axios({
          url: '/query', method: 'post', data: this.queryForm
        }).then(res => {
          this.fileList = res.data.data;
          this.msg = res.data.message;
        }).finally(()=>{this.loading = false})
      },
    },
  })
</script>
